<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>确认订单</title>
<link href="<%=basePath%>skin/css/public.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>skin/css/confirmOrder.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>skin/css/validform/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>skin/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/public.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/validform/Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/jquery.lSelect.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	navi()
	thisAreaCompand()
	//adrRadioToggle()
	//radioToggle()
	//logisRadioToggle()
	//invoiceRadioToggle()
	// 地区选择
	$("#areaId").lSelect({
		url: "<%=basePath%>area.shtml"
	});
	
	 //验证
	 var validform = $("#form0").Validform({
		btnSubmit:"#saveReceiver",
		tiptype:3
	 });
	 validform.addRule([
		{
		    ele:"#consignee",
		    datatype:"*",
		    nullmsg:"请输入收货人！"
		},
		{
		    ele:"#address",
		    datatype:"*",
		    nullmsg:"请输入地址！"
		},
		{
		    ele:"#zipCode",
		    datatype:"p",
		    nullmsg:"请输入邮编！"
		},
		{
		    ele:"#phone",
		    datatype:"*",
		    nullmsg:"请输入联系电话！"
		}
	 ]);
	 
	$("#addReceiver").click(function(){
		$("#newReceiver").show();
	});
	$("#cancelReceiver").click(function(){
		$("#newReceiver").hide();
	});
	
	$("#isInvoice").click(function(){
		$("#newInvoiceTitle").toggle();
	});
	
	var $submit = $("#submitOrder");
	var $submitTips = $("#submit-tips");
	$submit.click(function(){
		var finalReceiverId = $("input[name='receiverIds']:checked").val();
		$("#receiverId").val(finalReceiverId);
		// 校验
		$.ajax({
			url: "<%=basePath%>member/order/create.shtml",
			type: "POST",
			data: $("#form1").serialize(),
			dataType: "json",
			cache: false,
			beforeSend: function() {
				$submit.prop("disabled", true);
				$submitTips.show();
			},
			success: function(data) {
				var success = data.success;
				if (success == "true") {
					location.href = "<%=basePath%>member/order/payment.shtml?id=" + data.id;
				} else {
					setTimeout(function() {
						location.reload(true);
					}, 3000);
				}
			},
			complete: function() {
				$submit.prop("disabled", false);
				$submitTips.hide();
			}
		});
	});
});
</script>
</head>

<body>
	<div class="confirmOrder">
    	<div class="container">
    		<div class="header-wrap">
        		<c:import url="/layouts/top.jsp" />
                <c:import url="/layouts/head.jsp" />
                <div class="nav-warp">
					<div class="nav-main-warp wp">
						<div class="head-v3">
							<div class="navigation-up">
								<div class="navigation-inner">
									<div class="navigation-v3">
										<ul>
											<li class="fLeft navi_product first" _t_nav="product">
												<h2>
													<a href="<%=basePath%>shop/product/list.shtml">全部产品
														<img src="<%=basePath%>skin/images/all-product-arrow.png" />
													</a>
												</h2>
											</li>
											<li class="nav-up-selected-inpage fLeft" _t_nav="home">
												<h2>
													<a href="<%=basePath%>">美嘉商城</a>
												</h2>
											</li>
											<li class="fLeft self_community" _t_nav="community">
												<h2>
													<a href="javascript:void(0)">美嘉社区</a>
												</h2>
											</li>
											<li class="fLeft technology" _t_nav="technology">
												<h2>
													<a href="#">饲养技术</a>
												</h2>
											</li>
											<li class="fLeft server" _t_nav="server">
												<h2>
													<a href="">美嘉服务</a>
												</h2>
											</li>
											<li class="fLeft know" _t_nav="know">
												<h2>
													<a href="aboutMJ.html">了解美嘉</a>
												</h2>
											</li>
											<li class="fLeft navi_cart" _t_nav="cart">
												<h2>
													<a href="<%=basePath%>cart/list.shtml">
														<img src="<%=basePath%>skin/images/cart-icon.png" />购物车（<span id="cartnum">0</span>）
													</a>
												</h2>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="navigation-down">
								<div id="product" class="nav-down-menu menu-1"
									style="display: none;" _t_nav="product">
									<div class="navigation-down-inner">
										<c:forEach items="${productCategoryTree }" var="productCategory">
											<c:if test="${productCategory.grade == 0 }">
												<div class="navi-down-area">
													<a href="<%=basePath%>shop/product/list.shtml?productCategoryId=${productCategory.id }" class="product-cate">
														<img src="<%=basePath%>download.shtml?filepath=${productCategory.source}" />
													</a>
													<ul>
														<li><a href="<%=basePath%>shop/product/list.shtml?productCategoryId=${productCategory.id }">${productCategory.name}</a></li>
														<div class="clear"></div>
													</ul>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</div>
								
								<div id="community" class="nav-down-menu menu-3" style="display: none;" _t_nav="community">
                                    <div class="navigation-down-inner">
                                    	<div class="navi-down-area-second">
                                        	<a href="<%=basePath%>forumTopic/list.shtml" class="product-cate"><img src="<%=basePath%>skin/images/mjbbs.png" /></a>
                                        </div>
                                        <div class="navi-down-area-second">
                                        	<a href="<%=basePath%>collegeTopic/list.shtml" class="product-cate"><img src="<%=basePath%>skin/images/mjschool.png" /></a>
                                        </div>
                                    </div>
                                </div>
							</div>
						</div>
					</div>
				</div>
            </div>
        	<div class="content">
                <div class="confirmOrder-content">
                    <div class="buy-content">
                        <div class="stepbar">
                            <h1 class="buy-logo">确认订单</h1>
                            <ol class="tb-stepbar">
                                <li class="step-5 stepbar-current steper-over stepbar-first"><span>查看购物车</span></li>
                                <li class="step-5 stepbar-current "><span>提交订单</span></li>
                                <li class="step-5"><span>付款</span></li>
                                <li class="step-5 stepbar-last"><span>等待收货</span></li>
                            </ol>
                        </div>
                        <div class="address">
                            <h3 class="clearfix">
                            	<span class="fLeft">确认收货地址</span>
                                <span class="clear"></span>
							</h3>
							<form id="form0" name="form0" method="post" action="<%=basePath%>member/order/receiver/save.shtml">
							<ul id="address-list">
                                    <c:forEach items="${member.receivers }" var="receiver">
	                                    <li class="block adrRadioToggle">
	                                        <s class="marker"></s>
	                                        <span><input type="radio" name="receiverIds" value="${receiver.id}" <c:if test="${receiver.isDefault != null && receiver.isDefault}">checked</c:if>/></span>
	                                        <div class="address-info">
	                                        <a class="modify " href="javascript:void(0)">修改本地址</a>
	                                        <label class="user-address" >
		                                        <em>${receiver.address }</em>
		                                        <em>${receiver.phone }</em>
		                                        <em>${receiver.consignee }</em>
	                                        </label>
	                                        <c:choose>
	                                        	<c:when test="${receiver.isDefault != null && receiver.isDefault}">
	                                        		<em class="tip">默认地址</em>
	                                        	</c:when>
	                                        	<c:otherwise>
	                                        		<a class="set-default hidden" href="javascript:void(0)">设置为默认地址</a>
	                                        	</c:otherwise>
	                                        </c:choose>
	                                        </div>
	                                        <div class="clear"></div>
	                                    </li>
                                    </c:forEach> 
							</ul>
                            <div class="address-bar">
                                <a class="new" href="javascript:void(0)" id="addReceiver">使用新地址</a>
                            </div>
                            <div class="shouhuojuti" id="newReceiver" style="display:none">
			                	<div class="jutiitem">收货人：　<input type="text" id="consignee" name="consignee" size="30"/></div>
			                    <div class="jutiitem">地区：　    <input type="hidden" id="areaId" name="areaId" /></div>
			                    <div class="jutiitem">地址：　　<input type="text" id="address" name="address" size="30" class="heduiText"/></div>
			                    <div class="jutiitem">邮编：　　<input type="text" id="zipCode" name="zipCode" size="30" class="heduiText" /></div>
			                    <div class="jutiitem">电话：        <input type="text" id="phone" name="phone" size="30" class="heduiText"/></div>
			                    <div class="jutiitem">是否默认：<input type="checkbox" id="isDefault" name="isDefault" value="true"/></div>
			                    <div class="jutiitem">
				                    <input type="button" value="确定" class="btnSub" id="saveReceiver">
								    <input type="button" value="取消" class="btnQuit" id="cancelReceiver">
			                   </div>
			                </div>
			                </form>
                        </div>
<form id="form1" name="form1" method="post">
<input type="hidden" id="receiverId" name="receiverId"/>
<input type="hidden" name="cartToken" value="${cartToken}" />
                        <div class="aera">
                            <h3><span>支付方式</span></h3>
                            <div class="mode-content">
	                             <ul class="clearfix">
	                             	<c:forEach items="${paymentMethods }" var="paymentMethod">
	                                  <li>
	                                      <input type="radio" name="paymentMethodId" value="${paymentMethod.id }" />${paymentMethod.name }
	                                      ${paymentMethod.description }
	                                  </li>
	                                 </c:forEach>
	                             </ul>
                            </div>
							<div class="clear"></div>
                        </div>
                        <div class="aera">
                            <h3><span>配送方式</span></h3>
                            <div class="logis-content">
                                 <ul class="clearfix">
                                 	<c:forEach items="${shippingMethods }" var="shippingMethod">
                                     <li>
                                         <input type="radio" name="shippingMethodId" value="${shippingMethod.id }" />${shippingMethod.name }
                                         ${shippingMethod.description }
                                     </li>
                                    </c:forEach>
                                 </ul>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="aera">
                            <h3 class="clearfix">
                                <span class="fLeft">发票信息</span>
                                <span class="fRight area-controler"><a class="area-controler-btn" href="javascript:void(0)" >收起</a></span>
                                <span class="clear"></span>
                            </h3>
                            <div class="invoice-content area-contant">
                            	<div class="item clearfix">
                            		<span class="label">开具发票：</span>
                            		<div class="fLeft">
                            			<input type="checkbox" id="isInvoice" name="isInvoice" value="true"/>
                            		</div>
                                    <div class="clear"></div>
                                    <span class="label">发票抬头：</span>
                                    <div class="fLeft">
                                        <div id="invoice-tit-list" class="invoice-list invoice-tit-list">
                                            <div class="invoice-item mb10" style="cursor:pointer; text-align:left;">
                                                <div id="invoice-1" style="cursor:pointer">
                                                    <span id="" class="fore2" value="1100" name="usualInvoiceList">
                                                    	<input id="invoiceTitle" name="invoiceTitle" class="fapiaoText"/>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
								</div>
                            </div>
                        </div>
                        <div class="buy-order-field">
                            <h3>确认订单信息</h3>
                            <div class="buy-th-line clearfix">
                                <span class="buy-th-title">商品信息</span>
                                <span class="buy-th-price">单价(元)</span>
                                <span class="buy-th-quantity">数量</span>
                                <span class="buy-th-total">小计(元)</span>
                            </div>
                            <div class="order">
                            	<c:forEach items="${order.orderItems }" var="orderItem">
	                                <div class="item blue-line clearfix">
	                                    <div class="itemInfo item-title">
	                                        <a class="itemInfo-link"  href="<%=basePath%>shop/product/detail.shtml?productId=${orderItem.product.id}" target="_blank">
	                                            <span class="item-pic">
	                                                <span>
	                                                    <img class="itemInfo-pic" width="220" height="220" title="${orderItem.product.name}" src="<%=basePath%>download.shtml?filepath=${orderItem.product.thumbnail} "/>
	                                                </span>
	                                            </span>
	                                            <span class="itemInfo-title" >${orderItem.product.name }</span>
	                                        </a>
	                                        <p class="c2c-extraInfo-container promo-extraInfo"> </p>
	                                    </div>
	                                    <div class="item-price">
	                                        <span class="itemInfo price">
	                                            <em class="style-normal-small-black"><fmt:formatNumber value="${orderItem.price }" pattern="0.00"/></em>
	                                        </span>
	                                    </div>
	                                    <div class="quantity item-quantity">
	                                        <p>${orderItem.quantity }</p>
	                                    </div>
	                                    <div class="itemPay item-total">
	                                        <p class="itemPay-price price">
	                                            <em class="style-normal-bold-red "><fmt:formatNumber value="${orderItem.subtotal }" pattern="0.00"/></em>
	                                        </p>
	                                    </div>
	                                    <div class="clear"></div>
	                                </div>
                                </c:forEach>
                                <div class="order-extra clearfix">
                                    <div class="order-user-info">
                                        <div class="memo">
                                            <label>留言：</label>
                                            <textarea name="memo" class="memo-input c2c-text-default memo-close" placeholder="选填：对本次交易的说明" autocomplete="off"></textarea>
                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                            </div>
                        </div>
</form> 
                    </div>
                    <div class="buy-footer">
                        <div class="order-go clearfix">
                            <div class="address-confirm clearfix">
                                <div class="box">
                                    <div class="realPay" tabindex="0">
                                    	<em class="t">运费：</em>
                                    	<span class="price g_price ">
                                    		<span>¥</span>
                                            <em class="style-large-bold-red"><fmt:formatNumber value="${order.fee }" pattern="0.00"/></em>
                                    	</span>
                                    	<br/>
                                        <em class="t">实付款：</em>
                                        <span class="price g_price ">
                                            <span>¥</span>
                                            <em class="style-large-bold-red"><fmt:formatNumber value="${order.amount}" pattern="0.00"/></em>
                                        </span>
                                    </div>
                                </div>
                                <div class="submitOrder">
                                    <a class="btn-go" title="点击此按钮，提交订单" href="javascript:void(0)" id="submitOrder">提交订单</a>
                                </div>
                                <a class="return-cart" href="<%=basePath%>cart/list.shtml">返回购物车</a>
                                <div class="cfo-submit-tips" style="display:none" id="submit-tips">正在提交订单，请等待跳转...</div>
                            </div>
                        </div>
                    </div>
                    
				</div >
			</div>
			<c:import url="/layouts/foot.jsp" />
        </div>
    </div>
</body>
</html>
